<template>
    <van-popup v-model="show" closeable close-icon-position="arrow-left" close-icon="arrow-left"
        :style="{height:'100%',width:'100%',overflowY:(showTwo==true?'visible':'auto')}" duration=".2" @open="TackData"
        @close="empty();comVx()">
        <template v-if="mvUrl.content_video">
            <div class="mv" >
                <video :src="mvUrl.content_video[0].source_link" :poster="mvUrl.content_video[0].image" controls
                    width="100%" height="210px" ref="video" @canplay="iconF"></video>
                <span class="iconfont " v-show="first" :style="{opacity:appear?1:0}"
                    :class="iconShow?'icon-24gf-play':'icon-zanting'" @click="playMv"></span>
            </div>
            <div class="explain">
                <h3 class="van-ellipsis">{{mvUrl.title}}</h3>
                <p class="two">
                    <span>{{mvUrl.cate[0]}}</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>{{mvUrl.duration |  min}}</span></p>
                <p class="note van-multi-ellipsis--l3">{{mvUrl.intro}}</p>
                <span class="button" @click="showPopupTwo">阅读全文</span>
                <van-popup v-model="showTwo" closeable close-icon-position="arrow-left" close-icon="arrow-left"
                    :style="{height:'100%',width:'100%'}" position="right" duration=".2">
                    <div class="whole">
                        <h1>{{mvUrl.title}}</h1>
                        <p class="intro-one">{{mvUrl.index_intro}}</p>
                        <p class="intro-two">{{mvUrl.intro}}</p>
                        <span>From: Axel Kinnear</span>
                        <div class="name-two">
                            <p>by {{mvUrl.editor.username}}</p>
                            <p>{{mvUrl.publish_time|dateServer }}</p>
                        </div>
                    </div>
                </van-popup>
            </div>
            <div class="relevant">
                <div class="img" v-for="ele in mvUrl.relate_video" :key="ele.id">
                    <h6>{{ele.name}}</h6>
                    <div class="banner">
                        <van-swipe :loop="false" :width="164" :show-indicators="false">
                            <van-swipe-item v-for="item in ele.list" :key="item.postid">
                                <div class="image-box" @click="Inside(item.postid)">
                                    <img v-lazy="item.image" />
                                    <div class="embed">
                                        <span>{{item.duration| min}}</span>
                                        <p>{{item.title}}</p>
                                    </div>
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
            </div>
            <comment
             ref="comment"   :value="{total:mvUrl.comment.total,list:mvUrl.comment.list,like:mvUrl.count_like,share:mvUrl.count_share, postid:mvUrl.postid,type:mvUrl.post_type,title:mvUrl.title}" />
            <!-- <div class="user">
                <h6>{{mvUrl.comment.total}} 条评论</h6>
                <ul>
                    <li v-for="ele in mvUrl.comment.list" :key="ele.commentid">
                        <div class="left">
                            <div class="img-box"> <img v-lazy="ele.userinfo.avatar" alt=""></div>
                            <div class="words">
                                <h6>{{ele.userinfo.username}}</h6>
                                <p class="use-time">{{ele.addtime}}</p>
                                <p class="use-name">{{ele.content}}</p>
                            </div>
                        </div>
                        <div class="right iconfont icon-dianzan1">{{ele.count_approve}}</div>
                    </li>
                </ul>
                <h5 class="end">- End -</h5>
                <div class="pen">
                    <div class="inp"><span class="iconfont icon-bianji"></span></div>
                    <div class="chart">
                        <div>
                            <span class="iconfont icon-aixin"></span>
                            <span>{{mvUrl.count_like}}</span>
                        </div>
                        <div>
                            <span class="iconfont icon-daochu"></span>
                            <span>{{mvUrl.count_share}}</span>
                        </div>
                    </div>
                </div>
            </div> -->
        </template>
        <van-loading type="spinner" color="#1989fa" v-if="!mvUrl.content_video" />
    </van-popup>
</template>

<script>
    import {
        getMv
    } from "../../api/mv"
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import comment from "./comment.vue"
    export default {
        name: 'mv',
        components: {
            comment
        },
        data() {
            return {
                mvUrl: [],
                showTwo: false,
                iconShow: true,
                appear: true,
                first: false //解决初始化图标由小变大
            }
        },
        methods: {
            TackData() {
                getMv({
                    postid: this.postid
                }).then(data => {
                    this.mvUrl = data.data
                    console.log("mv", this.mvUrl);
                });
                this.appear = true;
            },
            empty() {
                this.appear = false;
                this.iconShow = true;
                this.first = false;
            },
            showPopupTwo() {
                this.showTwo = true;
            },
            ...mapMutations(['Inside']),
            iconF() {
                this.first = true;
            },
            playMv() {
                this.appear = true;
                if (this.iconShow) {
                    this.$refs.video.play();
                    this.iconShow = !this.iconShow;
                    this.appear = false;
                } else {
                    this.$refs.video.pause();
                    this.iconShow = !this.iconShow
                    this.appear = true;
                }
            },
            comVx(){
                this.$refs.comment.cancellation(); //调用子组件传vuex
            }
        },
        computed: {
            ...mapState(['postid']),
            show: {
                get() {
                    return this.$store.state.show
                },
                set(val) {
                    this.$store.commit('ClosePopup', val)
                }
            }
        },
        watch: {
            // postid(val) {
            //     getMv({
            //         postid: val
            //     }).then(data => {
            //         this.mvUrl = data.data
            //         console.log(this.mvUrl);
            //     })
            // }
            postid: {
                // immediate: true,
                handler(val) {
                    getMv({
                        postid: val||63534
                    }).then(data => {
                        this.mvUrl = data.data
                        console.log(this.mvUrl);
                    })
                }
            }
        }
        
    }
</script>

<style lang="less" scoped>
    .mv {
        position: relative;

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28px;
            color: #fff;
            opacity: 1;
            transition: all 3s;
        }
    }

    /deep/ .van-icon {
        top: 30px;
        left: 16px;
        color: #fff;
    }

    .van-swipe-item {
        transform: translateZ(0);
    }

    .explain {
        height: 312px;
        padding: 0 10px;
        text-align: center;

        // .van-popup {
        //     overflow-y: visible !important;
        // }

        .whole {
            padding: 60px 10px 0 10px;
            text-align: center;

            h1 {
                font-size: 20px;
                line-height: 34px;
            }

            .intro-one {
                font-size: 12px;
                color: #ccc;
                line-height: 36px;
            }

            .intro-two {
                font-size: 14px;
                line-height: 26px;
                text-align: left;
            }

            span {
                display: block;
                font-size: 12px;
                text-align: left;
                line-height: 48px;
            }

            .name-two {
                margin-top: 30px;
                line-height: 24px;

                & p:nth-child(1) {
                    color: #6B6D6B;
                }

                & p:nth-child(2) {
                    color: #ccc;
                    font-size: 12px
                }
            }
        }

        & /deep/ .van-icon {
            color: #000 !important;
        }

        h3 {
            font-weight: 600;
            padding: 46px 0 18px 0;
        }

        .two {
            font-size: 12px;
            color: #ccc;
        }

        .note {
            font-size: 14px;
            line-height: 24px;
            margin: 32px 0 26px;
        }

        .button {
            font-size: 14px;
            color: #5ABEFF;
        }
    }

    .relevant {
        padding: 30px 16px 0 16px;
        border-top: 1px solid #f6f6f6;
        border-bottom: 1px solid #f6f6f6;

        .img {
            margin-bottom: 30px;

            & h6 {
                font-size: 12px;
                padding-bottom: 14px;
            }

            .banner {
                height: 96px;

                .image-box {
                    width: 154px;
                    height: 94px;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;

                    }

                    .embed {
                        position: absolute;
                        bottom: 10px;
                        left: 10px;
                        font-size: 12px;
                        color: #ccc;

                        p {
                            width: 132px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis
                        }
                    }
                }
            }
        }
    }

    // .user {
    //     padding: 30px 16px 0;

    //     &>h6 {
    //         padding-bottom: 16px;
    //     }

    //     li {
    //         display: flex;
    //         padding: 14px 0;
    //         border-bottom: 1px solid #ccc;

    //         .left {
    //             display: flex;
    //             flex-wrap: wrap;

    //             .img-box {
    //                 width: 34px;
    //                 height: 30px;
    //                 border-radius: 50%;
    //                 overflow: hidden;
    //                 border: 1px solid #ccc;
    //                 margin-right: 10px;

    //                 img {
    //                     width: 100%;
    //                     height: 100%;
    //                 }
    //             }

    //             .words {
    //                 width: 268px;

    //                 h6 {
    //                     font-size: 10px;
    //                     color: #ccc;
    //                 }

    //                 .use-time {
    //                     color: #ccc;
    //                     font-size: 10px;
    //                     padding: 6px 0 10px
    //                 }

    //                 .use-name {
    //                     font-size: 16px;
    //                 }
    //             }

    //         }

    //         .right {
    //             font-size: 8px;
    //             color: #ccc;
    //         }
    //     }

    //     .end {
    //         font-size: 12px;
    //         line-height: 40px;
    //         text-align: center;
    //         color: #ccc;
    //     }

    //     .pen {
    //         width: 100%;
    //         height: 50px;
    //         background-color: #fff;
    //         position: sticky;
    //         bottom: 0;
    //         display: flex;
    //         padding: 10px 0;
    //         box-sizing: border-box;
    //         border-top: 1px solid #EFEFEF;

    //         .inp {
    //             flex: 1;
    //             height: 30px;
    //             line-height: 30px;
    //             border-radius: 20px;
    //             border: 1px solid #EFEFEF;
    //             margin-right: 20px;

    //             span {
    //                 font-size: 20px;
    //                 color: #ccc;
    //                 margin-left: 10px;
    //             }
    //         }

    //         .chart {
    //             flex: 1;
    //             display: flex;

    //             div {
    //                 font-size: 14px;
    //                 color: #ccc;
    //                 flex: 1;
    //                 line-height: 30px;
    //                 text-align: center;
    //             }
    //         }
    //     }
    // }

    .van-loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>